import React, { useState, useEffect } from "react";
import "./scss/Home.scss";
import { Search } from "react-vant";
import { Badge } from "react-vant";
import { Toast } from 'react-vant';
import { ChatO } from "@react-vant/icons";
import { Swiper } from "react-vant";
import IconFont from "../jjt/untils/Icon"; //icon图标
import { JumboTabs } from "antd-mobile";
import axios from "./untils/Axios";
import BottomFouter from "./untils/BottomFouter";
import { Loading } from "react-vant"; //加载中
import { Tabs } from "react-vant"; //滚动导航
import { Sticky } from "react-vant"; //粘性布局
import { FloatButton } from "antd"; //悬浮按钮
import { useNavigate } from "react-router-dom";
import { ShoppingCartO   } from '@react-vant/icons';
export default function Home() {
  let nav = useNavigate();
  const imgs = ["./jjt111.jpg", "./jjt112.jpg","./jjt113.jpg"]; //轮播图
  const [oneData, setOneData] = useState([]); //一级分类数据
  const [twoTitle, setTwoTitle] = useState([]); //渲染标题
  const [bookData, setBookData] = useState([]); //渲染数据
  const bookData2 = [1, 2];
  const twoTitle2 = [1, 2, 3, 4, 5, 6, 7];
  const backgroundStyle = {
    background: "linear-gradient(to bottom, #B9C9E5, #FFFFFF)",
  };
  const backgroundStyle2 = {
    background: "linear-gradient(to bottom, #F0E0C9, #FFFFFF)",
  };
  const hotsearch = ["Vue", "Python", "React", "布局"]; //热搜
  const [value, setValue] = useState(""); //热搜
  let Toast2 = (i) => {
    // console.log(i);
    setValue(hotsearch[i]);
  };
  //获取数据
  let getdata = async () => {
    let { data } = await axios.get("/jjt/getdatajjt");
    console.log(data.oneData);
    // console.log(data.twoData.filter(item=>item.typeOneId._id=="668a7d4ced150000cf0010c3"))
    setOneData(data.oneData);
    setTwoTitle(
      data.twoData.filter(
        (item) => item.typeOneId._id == "668a7d4ced150000cf0010c3"
      )
    );
    console.log(
      data.bookData.filter(
        (item) => item.typeOneId._id == "668a7d4ced150000cf0010c3"
      )
    );
    setBookData(
      data.bookData.filter(
        (item) => item.typeOneId._id == "668a7d4ced150000cf0010c3"
      )
    );
  };
  //分类切换
  let typeChange = (val) => {
    console.log(oneData[val]._id, 9999);
  };
  //去分类页面
  let toclassfy = (item) => {
    console.log(item._id, 2223);
    nav("/jjtclassfy", { state: { _id: item._id } });
  };
  //加入购物车
  let tocar = async(item) => {
    console.log(item,555555555)
    let {data} =  await axios.post("/jjt/caradd", item);
    console.log(data,6666)
    if(data.code===200){
      Toast({
        message: '加入购物车成功',
        // icon: <FireO />,
      })
    }else{
      Toast({
        message: '加入购物车失败',
      })
    }
  }
  useEffect(() => {
    getdata();
  }, []);
  return (
    <div className="home">
      {/* 搜索框 */}
      <Sticky>
        <div className="home1">
          <Search
            showAction
            // label="地址"
            actionText={
              <Badge content="5">
                <ChatO style={{ fontSize: "25px" }} />
              </Badge>
            }
            // value={value}
            // onChange={setValue}
            placeholder="请输入搜索关键词"
            shape="round"
            value={`大家都在搜：${value}`}
            onFocus={() => {
              nav("/jjtsearch", { state: { name: "" } });
            }}
          />
        </div>
      </Sticky>
      <div className="home2">
        <Swiper
          style={{ width: "100%", height: "100%", textAlign: "center" }}
          autoplay={4000}
        >
          {imgs.map((image) => (
            <Swiper.Item key={image}>
              <img src={image} className="img" />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div className="home3">
        {oneData.length > 0 ? (
          <JumboTabs
            defaultActiveKey={15}
            onChange={(val) => {
              typeChange(val);
            }}
          >
            {oneData.map((item, index) => (
              <JumboTabs.Tab
                title={
                  <IconFont
                    onClick={() => {
                      toclassfy(item);
                    }}
                    type={item.icon}
                    style={{ fontSize: "30px" }}
                  />
                }
                description={item.name}
                key={index}
              ></JumboTabs.Tab>
            ))}
          </JumboTabs>
        ) : (
          <div className="home3ball">
            <Loading type="ball" />
          </div>
        )}
      </div>
      <div className="home4">
        <div
          className="homeleft"

          onClick={() => {
            nav("/jjtmap2");
          }}
        >
          <img
            style={{ width: "100%", height: "100%" ,borderRadius:"10px"}}
            src="./jjt001.jpg"
            alt=""
          />
        </div>
        <div className="homeright">
          <div onClick={() => {
            nav("/hot");
          }}>
            <img
              style={{ width: "100%", height: "100%", borderRadius:"10px" }}
              src="./jjt003.jpg"
              alt=""
            />
          </div>
          <div onClick={() => {
            nav("/advise");
          }}>
            <img
              style={{ width: "100%", height: "100%" ,borderRadius:"10px"}}
              src="./jjt002.jpg"
              alt=""
            />
          </div>
        </div>
      </div>
      {twoTitle.length > 0 ? (
        <div className="home5">
          <div className="home55">
            <Tabs
              sticky
              offsetTop={46}
              scrollspy={{ autoFocusLast: true, reachBottomThreshold: 50 }}
            >
              {twoTitle.map((item, index) => (
                <Tabs.TabPane key={item._id} title={item.name}>
                  <div
                    className="home5con"
                    style={index % 2 === 0 ? backgroundStyle : backgroundStyle2}
                  >
                    <div className="home5con1">{item.name}</div>
                    <div className="home5con2">
                      <img src={item.img} alt=""></img>
                    </div>
                    {bookData
                      .filter((ele) => ele.typeTwoId._id == item._id)
                      .slice(0, 2)
                      .map((i) => (
                        <div key={i._id} className="home5con3" >
                          <div className="home5con3left" onClick={()=>{nav(`/detail?id=${i._id}`)}}>
                            <img src={i.image} alt=""></img>
                          </div>
                          <div className="home5con3right">
                            <div
                              style={{ fontSize: "18px", fontWeight: "bold" }}
                            >
                              {i.name}
                            </div>
                            <div>
                              <span className="span1">
                                ￥{(i.price * i.discount) / 10}
                              </span>
                              <span className="span2">￥{i.price}</span>
                              <span className="span3"><ShoppingCartO onClick={()=>{tocar(i)}}  /></span>
                            </div>
                          </div>
                        </div>
                      ))}
                  </div>
                </Tabs.TabPane>
              ))}
            </Tabs>
          </div>
        </div>
      ) : (
        <div className="home52">
          <div className="home552">
            <div
              style={{ background: "#e3e3e5", width: "100%", height: "50px" }}
            >
              {" "}
            </div>
            {twoTitle2.map((item, index) => (
              <div key={index}>
                <div
                  className="home5con2"
                  style={index % 2 === 0 ? backgroundStyle : backgroundStyle2}
                >
                  <div className="home5con12"></div>
                  <div className="home5con22">
                    <button></button>
                  </div>
                  {bookData2.map((i, index) => (
                    <div key={index} className="home5con32">
                      <div className="home5con3left2">
                        <button></button>
                      </div>
                      <div className="home5con3right2">
                        <div
                          style={{
                            width: "100%",
                            height: "30px",
                            background: "#e3e3e5",
                          }}
                        ></div>
                        <div
                          style={{
                            width: "100%",
                            height: "30px",
                            background: "#e3e3e5",
                          }}
                        ></div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      <FloatButton.BackTop />
      <BottomFouter></BottomFouter>
      <Swiper
        style={{ width: "100%", height: "0px", textAlign: "center" }}
        autoplay={3000}
        onChange={(i) => Toast2(i)}
      >
        {hotsearch.map((image) => (
          <Swiper.Item
            key={image}
            style={{ borderRadius: "10px" }}
          ></Swiper.Item>
        ))}
      </Swiper>
    </div>
  );
}
